<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>用户管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<jsp:include page="../header.jsp"></jsp:include>
<div style="padding: 16px;">
    <table class="layui-hide" id="user" lay-filter="test"></table>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="deleteMore">批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="addUser">添加用户</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
    </div>
</script>
<script src="/layui/layui.js" type="text/javascript"></script>
<script>
    layui.use(['table', 'dropdown'], function () {
        var table = layui.table;
        var dropdown = layui.dropdown;
        var $ = layui.$;

        // 创建渲染实例
        table.render({
            elem: '#user',   //  选择器
            id:'user',
            url: '/user?method=list', // 此处为静态模拟数据，实际使用时需换成真实接口  ?page=1&limit=20
            toolbar: '#toolbarDemo',   // 绑定头部工具栏
            height: 'full-100', // 最大高度减去其他容器已占有的高度差
            cellMinWidth: 80,
            page: true,  // 开启分页
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', title: 'ID'},
                {field: 'username', title: '用户'},
                {
                    field: 'sex', title: '性别', templet: function (dt) {
                        return dt.sex == 0 ? "女" : "男"
                    }
                },
                {field: 'birth', title: '出生日期', width: 120},
                {field: 'roleName', title: '角色'},
                {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]]
        });

        // 头部工具栏事件  lay-filter = test
        table.on('toolbar(test)', function (obj) {
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch (obj.event) {
                case 'deleteMore':
                    //获取选中行数据   [{},{}]
                    var data = checkStatus.data;
                    //判定用户是否选中数据
                    if (data.length == 0) {
                        layer.alert("请至少选中一条数据");
                        return false;
                    }
                    // 获取选中行数据的id   [] 箭头函数
                    let ids = data.map(dt => dt.id)
                    console.log(JSON.stringify(ids))

                    layer.confirm("确认删除选中行?", function () {
                        // 发送异步请求 删除用户信息
                        $.ajax({
                            url:'/user?method=deleteBatch',
                            data:{ids},
                            dataType:'JSON',
                            type:'get',
                            traditional:true,   //  无需将参数深度格式化
                            success:function (res) {
                                if (res.code == 0) {
                                    layer.msg(res.msg, {icon: 1, time: 3000}, function () {
                                           parent.layui.table.reloadData('user')
                                    })
                                } else {
                                    layer.msg(res.msg, {icon: 2})
                                }
                            }

                        })
                    })

                    break;
                case 'addUser':
                    layer.open({
                        type: 2, // page 层类型
                        area: ['500px', '450px'],
                        title: '添加用户',
                        shade: 0.6, // 遮罩透明度
                        shadeClose: true, // 点击遮罩区域，关闭弹层
                        resize: false,
                        anim: 0, // 0-6 的动画形式，-1 不开启
                        content: '/user/add.jsp'
                    });
                    break;
            }
            ;
        });

        // 触发单元格工具事件  监听行工具事件
        table.on('tool(test)', function (obj) { // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            let id = data.id;
            let ids = [];
            ids.push(id)
            sessionStorage.setItem("username",data.username)
            if (obj.event === 'edit') {
                layer.open({
                    type: 2, // page 层类型
                    area: ['500px', '450px'],
                    title: '编辑用户',
                    shade: 0.6, // 遮罩透明度
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    resize: false,
                    anim: 0, // 0-6 的动画形式，-1 不开启
                    content: '/user/edit.jsp'
                });
            } else if (obj.event === 'delete') {

                layer.confirm("删除当前行数据", function () {
                    // 发送异步请求删除用户信息
                    $.ajax({
                        url:'/user?method=deleteBatch',
                        data:{ids},
                        dataType:'JSON',
                        type:'get',
                        traditional:true,   //  无需将参数深度格式化
                        success:function (res) {
                            if (res.code == 0) {
                                layer.msg(res.msg, {icon: 1, time: 3000}, function () {
                                    parent.layui.table.reloadData('user')
                                })
                            } else {
                                layer.msg(res.msg, {icon: 2})
                            }
                        }

                    })
                })

            }
        });
    });
</script>
</body>
</html>
